<html>

<head>
    <title>用户角色设置</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="../../static/react/react.development.js" type="text/javascript"></script>
    <script src="../../static/react/react-dom.development.js" type="text/javascript"></script>
    <script src="../../static/react/moment-with-locales.min.js" type="text/javascript"></script>
    <script src="../../static/react/babel.min.js" type="text/javascript"></script>
    <!-- antd -->
    <link href="../../static/react/antd/antd.min.css" rel="stylesheet" type="text/css" />
    <script src="../../static/react/antd/antd-with-locales.min.js" type="text/javascript"></script>
    <!-- axios -->
    <script src="../../static/react/axios.min.js" type="text/javascript"></script>
    <script src="../../static/react/qs.js" type="text/javascript"></script>
    <script src="../../static/react/lodash.min.js" type="text/javascript"></script>
    <script src="../../static/react/request.js" type="text/javascript"></script>
    <script src="../../ffres/dict/all.js" type="text/javascript"></script>
    <link href="../../static/react/common.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="app"> </div>
<script type="text/babel">
    // 请求后台相对路径
    const baseURL = "../../"
    // ant design 组件别名引用
    const { Row, Col, Form, Input, Button, Table, Modal, message,Transfer} = antd
    // 业务组件
    class App extends React.Component {
        constructor(props){
            super(props)
            // 在构造器中获取引用实例
            this.formRef = React.createRef()
            this.modelFormRef = React.createRef()

            // 将组件内函数绑定 this 上下文
            this.handleChange = this.handleChange.bind(this)
            this.renderItem = this.renderItem.bind(this)
            this.getRolesList = this.getRolesList.bind(this)
            this.getRoleUserList = this.getRoleUserList.bind(this)

            //获取上个页面传的参数
            let search = window.location.search
            if(search.startsWith('?')){
                search = search.substring(1,search.length)
            }
            search = Qs.parse(search);

            // 初始组件数据
            this.state = {
                mockData: [],
                targetKeys: [],
                ...search,
            }
        }

        //初始化
        componentDidMount() {
            this.getRolesList();
            this.getRoleUserList();
        }

        handleChange = (targetKeys, direction, moveKeys) => {
            let jsonData = JSON.parse('{'+'"actorno":"' + this.state.actorno + '"' + ','+'"roleNostr":"' + moveKeys + '"' +'}');
            if("right" == direction){//新增
                API.request({
                    baseURL: baseURL,
                    method: "post",
                    url: "api/s/roles/user",
                    data: jsonData,
                }).then(function(data){
                    message.success("新增成功");
                }).catch(function(error){
                    message.warning("新增失败");
                })
            }else if("left" == direction){//删除
                API.request({
                    baseURL: baseURL,
                    method: "delete",
                    url: "api/s/roles/user",
                    data: jsonData,
                }).then(function(data){
                    message.success("删除成功");
                }).catch(function(error){
                    message.warning("删除失败");
                })
            }
            this.setState({targetKeys});
        };

        renderItem = item => {
            const customLabel = (
                <span className="custom-item">
                      {item.title}
                </span>
            );
            return {
                label: customLabel, // for displayed item
                value: item.title, // for title and filter matching
            };
        }

        //获取可选用户角色列表
        getRolesList(){
            API.request({
                baseURL: baseURL,
                method: "post",
                url: "api/s/roles/not/used",
                data: Qs.stringify({"actorno": this.state.actorno}) ,
                dataType: "form",
            }).then(data=>{
                if(data.rows.length > 0){
                    for (let i = 0; i < data.rows.length; i++) {
                        const dataList = {
                            key: data.rows[i].roleno,
                            title: data.rows[i].rolename,
                        };
                        this.state.mockData.push(dataList);
                        this.setState({mockData:this.state.mockData});
                    }
                }
            }).catch(error=>{
                message.info("获取可选用户角色列表失败！")
            })

        }

        //获取已设置用户角色列表
        getRoleUserList(){
            API.request({
                baseURL: baseURL,
                method: "post",
                url: "api/s/role/user/all",
                data: Qs.stringify({"actorno": this.state.actorno}) ,
                dataType: "form",
            }).then(data=>{
                if(data.rows.length > 0){
                    for (let i = 0; i < data.rows.length; i++) {
                        const dataList = {
                            key: data.rows[i].roleno,
                            title: data.rows[i].rolename,
                        };
                        this.state.mockData.push(dataList);
                        this.state.targetKeys.push(dataList.key);
                    }
                    this.setState({targetKeys:this.state.targetKeys});
                }
            }).catch(error=>{
                message.info("获取已设置用户角色列表失败！")
            })

        }

        doClose(){
            window.close();
        }

        render() {
            return (
                <div>
                    <div>
                        <Transfer
                            titles={['可选角色', '已选角色']}
                            dataSource={this.state.mockData}
                            listStyle={{
                                width: 400,
                                height: 400,
                            }}
                            operations={['添加', '删除']}
                            targetKeys={this.state.targetKeys}
                            onChange={this.handleChange}
                            render={this.renderItem}
                        />
                    </div>
                    <div>
                        <div align="center">
                            <Button type="primary" onClick={this.doClose} >关闭窗口</Button>
                        </div>
                    </div>
                </div>
            );
        }
    }
    ReactDOM.render(
        <antd.ConfigProvider locale={antd.locales.zh_CN}>
            <App />
        </antd.ConfigProvider>,
        document.getElementById('app')
    );
</script>
</body>
</html>